<template>
<div class="item">
    <div class="item-icon ">
        <img src="@/assets/images/charts/circle-bg.png" class="circle-bg" />
    </div>
    <div class="item-right">
        <div class="item-right-inner">
            <div class="text-title">{{ title }}</div>
            <div class="text-content">{{text}}</div>
        </div>
    </div>
</div>
</template>

<script setup>

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  text: {
    type: String,
    default: '',
  },
})
</script>

<style lang='scss' scoped>
.text-content{
    font-size: 2vw;
    color: #cda0ad;
}
.item-right{
    margin-left: 20px;
}
.m-data-screen .center .item .item-icon
{
    width: 4vw;
    height: 4vw;
}
.m-data-screen .center .circle-bg{
    width: 100%;
  height: 100%;
  object-fit: cover;
}
.center .circle-bg {
    animation: rotate 5s infinite linear;
}
</style>